<template>
  <basic-container>
    <avue-crud :option="option"
               :data="data"
               ref="crud"
               v-model="form"
               :table-loading="loading"
               :permission="permissionList"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               :page="page"
               @refresh-change="refreshChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @on-load="onLoad">
      <template slot-scope="scope" slot="photo">
        <el-image fit="contain" :src="scope.row.photo"
                  style="margin-right: 0.2rem;width: 50px; height: 50px;margin: 0 0.2rem;"></el-image>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button @click="openDrawerView(scope.row)" size="mini" type="text"
                   v-has="'/mall-cloud-base/complaint/detail'">查看详情
        </el-button>
        <el-button v-if="scope.row.state==0" @click="acceptCom(scope.row.id,1)" size="mini" type="text"
                   v-has="'/mall-cloud-base/complaint/addComplaintLog'">受理
        </el-button>
        <el-button v-if="scope.row.state==1" @click="acceptCom(scope.row.id,2)" size="mini" type="text"
                   v-has="'/mall-cloud-base/complaint/addComplaintLog'">处理
        </el-button>
      </template>
    </avue-crud>
    <el-drawer size="60%" :show-close="false" title="投诉详情" :close-on-click-modal="false" top="50px" center
               :visible.sync="drawerView">
      <div>
        <avue-form ref="form" v-model="detailObj" :disabled=true :option="viewOption">
          <template slot-scope="scope" slot="photo">
            <div>
              <el-image v-if="detailObj.photo!='undefined'" :preview-src-list="imgUrlList1" :src="detailObj.photo"
                        style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">
              </el-image>
              <el-image v-if="detailObj.photo2!='undefined'" :preview-src-list="imgUrlList2" :src="detailObj.photo2"
                        style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">
              </el-image>
              <el-image v-if="detailObj.photo3!='undefined'" :preview-src-list="imgUrlList3" :src="detailObj.photo3"
                        style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">
              </el-image>
            </div>
          </template>
          <!--<template slot-scope="scope" slot="photo2">-->
          <!--<div>-->
          <!--<el-image v-if="detailObj.photo2" fit="contain" :src="detailObj.photo3" style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">-->
          <!--</el-image>-->
          <!--</div>-->
          <!--</template>-->
          <!--<template slot-scope="scope" slot="photo3">-->
          <!--<div>-->
          <!--<el-image v-if="detailObj.photo3" fit="contain" :src="detailObj.photo3" style="margin-right: 0.2rem;margin: 0 0.2rem;width: 50px; height: 50px">-->
          <!--</el-image>-->
          <!--</div>-->
          <!--</template>-->
          <template slot-scope="scope" slot="menuForm">
            <el-button @click="closeDrawer">关闭</el-button>
          </template>
        </avue-form>
      </div>
    </el-drawer>
    <el-dialog :title="dialogTitle"
               :visible.sync="confirmDialog"
               append-to-body
               width="30%"
    >
      <el-form :model="dialogForm">
        <el-form-item :label="dialogFormTitle">
          <el-input type="textarea" :placeholder="contentHolder" v-model="dialogForm.content" maxlength="50"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loadReplyBtn" @click="confirmSumit"
                     v-has="'/mall-cloud-base/complaint/addComplaintLog'">确定
          </el-button>
          <el-button @click="confirmDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </basic-container>
</template>

<script>
    import {
        getList,
        remove,
        update,
        add,
        addComplaintLog,
        detail
    } from "@/api/base/transaction/complaint";
    import {mapGetters} from "vuex";

    var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
    export default {
        data() {
            return {
                imgUrlList1: [], // 详情图片的数组
                imgUrlList2: [], // 详情图片的数组
                imgUrlList3: [], // 详情图片的数组
                photos: [],//预览图片
                isDisabled: false,
                contentHolder: "",
                dialogTitle: "确认受理",
                dialogFormTitle: "受理意见",
                confirmDialog: false,
                loadReplyBtn: false,
                drawerView: false,
                //受理，处理防重提交
                confirmSubmitFlag: true,
                dialogForm: {
                    content: "",
                    complaintId: "",
                    operateType: "1",
                },//确认框对象
                detailObj: {},//查看详情对象
                form: {},
                query: {},
                loading: true,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    searchBtn: false,
                    size: 'mini',
                    addBtn: false,
                    tip: false,
                    border: true,
                    editBtn: false,
                    viewBtn: false,
                    delBtn: false,
                    refreshBtn: false,
                    columnBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    // calcHeight: 380,
                    dialogType: 'drawer',
                    menuWidth: 140,
                    align: 'center',
                    searchMenuSpan: 6,
                    column: [
                        {
                            label: "投诉人",
                            fixed: true,
                            prop: "complaintUserName",
                            rules: [{
                                required: true,
                                message: "投诉人",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "被投诉人",
                            prop: "beComplaintUserName",
                            rules: [{
                                required: true,
                                message: "被投诉人",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "订单编号",
                            search: true,
                            prop: "orderNum",
                            width: 160,
                            rules: [{
                                required: true,
                                message: "订单编号",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉主题",
                            search: true,
                            prop: "subject",
                            type: 'select',
                            dicUrl: '/base/complaint/complaintSubjectList',
                            props: {
                                label: 'name',
                                value: 'code'
                            },
                            rules: [{
                                required: true,
                                message: "投诉主题",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉状态",
                            search: true,
                            prop: "state",
                            type: 'select',
                            display: true,
                            width: 70,
                            dicData: Dict.COMPLAINT_STATE,
                            rules: [{
                                required: true,
                                message: "投诉状态",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉图片",
                            prop: "photo",
                            slot: true,
                            width: 76,
                            rules: [{
                                required: true,
                                message: "投诉图片1",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉图片2",
                            prop: "photo2",
                            hide: true,
                            width: 76,
                            rules: [{
                                required: true,
                                message: "投诉图片2",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉图片3",
                            prop: "photo3",
                            hide: true,
                            width: 76,
                            rules: [{
                                required: true,
                                message: "投诉图片3",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "描述",
                            prop: "descr",
                            width: 200,
                            rules: [{
                                required: true,
                                message: "描述",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "投诉时间",
                            prop: "addTime",
                            width: 140,
                            display: false,
                            rules: [{
                                required: true,
                                message: "投诉时间",
                                trigger: "blur"
                            }]
                        }
                    ]
                },
                viewOption: {
                    card: true,
                    submitBtn: false,
                    emptyBtn: false,
                    labelWidth: '120',
                    group: [
                        {
                            icon: 'el-icon-info',
                            label: '投诉信息',
                            prop: 'group1',
                            column: [
                                {
                                    placeholder: "投诉人",
                                    label: "投诉人",
                                    prop: "complaintUserName",
                                    span: 12,
                                },
                                {
                                    placeholder: "被投诉人",
                                    label: "被投诉人",
                                    prop: "beComplaintUserName",
                                    span: 12,
                                },
                                {
                                    placeholder: "订单编号",
                                    label: "订单编号",
                                    prop: "orderNum",
                                    span: 12,
                                },
                                {
                                    placeholder: "投诉主题",
                                    label: "投诉主题",
                                    prop: "subject",
                                    span: 12,
                                    type: 'select',
                                    dicUrl: '/base/complaint/complaintSubjectList',
                                    props: {
                                        label: 'name',
                                        value: 'code'
                                    }
                                },
                                {
                                    placeholder: "投诉状态",
                                    label: "投诉状态",
                                    prop: "state",
                                    type: 'select',
                                    span: 12,
                                    display: true,
                                    dicData: Dict.COMPLAINT_STATE
                                },
                                {
                                    placeholder: "投诉图片",
                                    label: "投诉图片",
                                    span: 12,
                                    prop: "photo",
                                    formslot: true,
                                },
                                {
                                    placeholder: "投诉描述",
                                    label: "投诉描述",
                                    span: 24,
                                    type: "textarea",
                                    prop: "descr",
                                },
                                {
                                    placeholder: "投诉时间",
                                    label: "投诉时间",
                                    prop: "addTime",
                                    span: 12,
                                },
                                {
                                    placeholder: "是否取消",
                                    label: "是否取消",
                                    prop: "isCancel",
                                    type: "radio",
                                    valueDefault: 0,
                                    dicData: [
                                        {
                                            label: '否',
                                            value: 0
                                        }, {
                                            label: '是',
                                            value: 1
                                        }
                                    ],
                                    span: 12,
                                }
                            ]
                        },
                        {
                            icon: 'el-icon-info',
                            label: '受理信息',
                            prop: 'group1',
                            column: [
                                {
                                    placeholder: "受理人",
                                    label: "受理人",
                                    prop: "acceptUser",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "受理时间",
                                    label: "受理时间",
                                    prop: "acceptTime",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "受理意见",
                                    label: "受理意见",
                                    prop: "acceptMean",
                                    span: 24,
                                    type: "textarea",
                                    desplay: true,
                                }
                            ]
                        },
                        {
                            icon: 'el-icon-info',
                            label: '处理信息',
                            prop: 'group1',
                            column: [
                                {
                                    placeholder: "处理人",
                                    label: "处理人",
                                    prop: "handleUser",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "受理意见",
                                    label: "处理时间",
                                    prop: "handleTime",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "处理意见",
                                    label: "处理意见",
                                    prop: "handleMean",
                                    span: 24,
                                    type: "textarea",
                                    desplay: true,
                                }
                            ]
                        },
                        {
                            icon: 'el-icon-info',
                            label: '回复信息',
                            prop: 'group1',
                            column: [
                                {
                                    placeholder: "回复人",
                                    label: "回复人",
                                    prop: "replyUserName",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "回复时间",
                                    label: "回复时间",
                                    prop: "replyTime",
                                    span: 12,
                                    desplay: true,
                                },
                                {
                                    placeholder: "回复内容",
                                    label: "回复内容",
                                    prop: "beComplaintMean",
                                    type: 'textarea',
                                    span: 24,
                                    desplay: true,

                                }
                            ]
                        }
                    ]
                },
                data: []
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {};
            },
        },
        watch: {
            'dialogForm.content'() {
                if(this.dialogForm.content != '') {
                    this.isDisabled = false;
                } else {
                    this.isDisabled = true;
                }
            }
        },
        methods: {
            //确认提交
            confirmSumit() {
                if(this.confirmSubmitFlag) {
                    this.confirmSubmitFlag = false;
                } else {
                    return;
                }
                if(this.dialogForm.content) {
                    this.loadReplyBtn = true;
                    addComplaintLog(this.dialogForm).then((res) => {
                        if(res.data.code == 200) {
                            this.loadReplyBtn = false;
                            this.confirmDialog = false;
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                            this.onLoad(this.page);
                            this.isDisabled = true;
                            this.loadReplyBtn = false;
                        } else {
                            this.$message.error(res.data.message)
                        }
                        setTimeout(() => {
                            this.confirmSubmitFlag = true;
                        }, 1000)
                    });
                } else {
                    this.confirmSubmitFlag = true;
                    this.loadReplyBtn = false;
                    this.isDisabled = true;
                    this.$message({
                        type: "error",
                        message: "请先填写处理意见!"
                    });
                }


            },
            //打开确认弹框
            acceptCom(complaintId, type) {
                if(type == 1) {
                    this.dialogTitle = "确认受理";
                    this.dialogFormTitle = "受理意见";
                    this.contentHolder = "请填写受理意见！";
                    this.dialogForm.content = "";
                } else {
                    this.dialogTitle = "确认处理";
                    this.dialogFormTitle = "处理意见";
                    this.contentHolder = "请填写处理意见";
                    this.dialogForm.content = "";//清空填写的受理意见内容
                }
                this.dialogForm.complaintId = complaintId;
                this.dialogForm.operateType = type;
                this.confirmDialog = true;
                // this.isDisabled=false;
            },
            //打开查看详情框
            openDrawerView(row) {
                this.drawerView = true;
                this.detailObj = row;
                detail(row.id).then((res) => {
                    this.imgUrlList1 = []
                    this.imgUrlList2 = []

                    this.imgUrlList3 = []
                    if(res.data.code == 200) {
                        this.detailObj = res.data.data;
                        if(res.data.data.photo === 'undefined') return
                        this.imgUrlList1.push(this.detailObj.photo)
                        if(res.data.data.photo2 === 'undefined') return
                        this.imgUrlList2 = [this.detailObj.photo2, this.detailObj.photo]
                        this.imgUrlList1.push(this.detailObj.photo2)
                        if(res.data.data.photo3 === 'undefined') return
                        this.imgUrlList2 = [this.detailObj.photo2, this.detailObj.photo3, this.detailObj.photo]
                        this.imgUrlList3 = [this.detailObj.photo3, this.detailObj.photo, this.detailObj.photo2]
                        this.imgUrlList1.push(this.detailObj.photo3)
                    } else {
                        this.$message.error(res.data.message)
                    }
                });
            },
            openPreview(imgUrls) {
                this.photos = [
                    {thumbUrl: imgUrls, url: imgUrls},
                ]
                this.$ImagePreview(this.photos);
            },
            closeDrawer() {
                this.drawerView = false;
            },
            rowSave(row, loading, done) {
                row.position = row.positionIds;
                row.deptName = row.$deptId;
                row.repassword = row.password;
                add(row).then(() => {
                    loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    console.log(error);
                });
            },
            rowUpdate(row, index, loading, done) {
                row.position = row.positionIds;
                update(row).then(() => {
                    loading();
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                }, error => {
                    done();
                    console.log(error);
                });
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then(() => {
                        this.onLoad(this.page);
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                    });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.page.currentPage = 1
                this.onLoad(this.page, params, done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },
            onLoad(page, params = {}, done) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if(done) {
                        done();
                    }
                    this.loading = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data;
                });
            }
        }
    };
</script>

<style>
</style>
